<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>山姆的小店</title>
    <link rel="icon" href="./images/favicon-20191215013705858.ico" type="image/x-icon" />
    <link type="text/css" rel="stylesheet" href="./styles/Login.css">
    <link type="text/css" rel="stylesheet" href="./styles/main.css">
    <link type="text/css" rel="stylesheet" href="./styles/goods.css">
    <link type="text/css" rel="stylesheet" href="./styles/cart.css">
    <link type="text/css" rel="stylesheet" href="./styles/orders.css">
    <link type="text/css" rel="stylesheet" href="./styles/add.css">
</head>

<body>
    <button onclick="window.location.reload()">刷新界面</button>
    <!-- 登录界面 -->
    <div class="row" id="login" style="margin-bottom: 50px;">
        <div class="login">
            <div style="margin:auto 0; text-align: center;">
                <img src="./images/圣诞铃铛.png" class="welcome-img">
            </div>
            <p
                style="text-align: center; font-family: 微软雅黑，Times, 'Times New Roman', serif;font-size: 35px; font-weight: 550; margin: 0px; color: green;">
                Welcome</p>
            <p
                style="text-align: center;font-family: 微软雅黑;font-size: 20px;margin: 5px;font-weight: 500;margin-bottom: 20px;">
                欢迎进入山姆的小店</p>
            <div class="login-body" style="background-color: white;">
                <form action="#" class="outside-form" name="loginForm">
                    <h2>登录</h2>
                    <div class="form-group">
                        <label for="name">name</label>
                        <input type="text" class="form-control" name="user" placeholder="用户名" autocomplete="off" >
                    </div>
                    <div class="form-group">
                        <label for="password">password</label>
                        <input type="password" class="form-control" name="password" placeholder="密码" autocomplete="off" >
                    </div>
                </form>
                <div class="form-group form-group-bottom" style="margin-bottom:10px;">
                    <input type="submit" value="登录" class="btn btn-primary" onclick="login()">
                </div>
            </div>
        </div>
    </div>

    <!-- 
        上方的导航栏
        商品
        购物车
        订单
    -->
    <div id="top">
        <div class="nav">
            <div id="select-1" class="nav-select selected" >小店货架</div>
            <div id="select-2" class="nav-select" >购物车</div>
            <div id="select-3" class="nav-select" >我的订单</div>
            <div class="nav-user">欢迎用户：John</div>
        </div>
    </div>
    <div id="goods-frame">
        <div class="goods">
            <div class="good-box">
                <img src="./images/peach.jpg" class="good-img">
            </div>
            <div class="infor-box">
                <span class="good-name">桃子</span>
                <span class="good-loc">烟台</span>
                <span class="good-price">￥5</span>
            </div>
            <div class="add-good" onclick="addGood('桃子')">加入购物车</div>
        </div>

        <div class="goods">
            <div class="good-box">
                <img src="./images/apple.jpg" class="good-img">
            </div>
            <div class="infor-box">
                <span class="good-name">苹果</span>
                <span class="good-loc">烟台</span>
                <span class="good-price">￥5</span>
            </div>
            <div class="add-good" onclick="addGood('苹果')">加入购物车</div>
        </div>

        <div class="goods">
            <div class="good-box">
                <img src="./images/pear.jpg" class="good-img">
            </div>
            <div class="infor-box">
                <span class="good-name">梨</span>
                <span class="good-loc">烟台</span>
                <span class="good-price">￥5</span>
            </div>
            <div class="add-good" onclick="addGood('梨')">加入购物车</div>
        </div>
    </div>

    <div id="shopping-cart-frame">
        <p style="width: 700px; text-align: center; font-size: 16px;color: darkgray;margin:0 auto;margin-top: 20px;margin-bottom: 10px;">温馨提示，物品需要点击左侧圆圈，选中变成绿色才能成功结算哦~</p>
        <div class="cart-box">
            <div class="cart-infor">
                <p class="infor-item-1"><img src="./images/圣诞花环.png" style="vertical-align: top;">货品</p>
                <p class="infor-item-2"><img src="./images/圣诞袜.png" style="vertical-align: top;">数量</p class="infor-item">
                <p class="infor-item-3"><img src="./images/圣诞球.png" style="vertical-align: top;">单格(元)</p class="infor-item">
            </div>
            <div class="cart-good">
                <!-- 复选框，货品名字，数量，总价-->
                <div class="cart-good-choose">
                    <input type="checkbox" id="checkbox-1" >
                    <label for="checkbox-1" class="cart-good-choose-btn">······</label>
                </div>
                <div class="cart-good-name">苹果</div>
                <div class="cart-good-number">
                    <div class="gw_num">
                        <em class="jian">-</em>
                        <input type="text" value="5" class="num"/>
                        <em class="add">+</em>
                     </div>
                     <div style="display: inline-block;vertical-align: top;">
                        <span style="display: inline-block; font-size: 12px;">库存（5000）</span>
                     </div>
                    
                </div>
                <div class="cart-good-cost">25</div>
                <div class="cart-good-delete"></div>
            </div>
    
            <div class="cart-good">
                <!-- 复选框，货品名字，数量，总价-->
                <div class="cart-good-choose">
                    <input type="checkbox" id="checkbox-2" >
                    <label for="checkbox-2" class="cart-good-choose-btn">······</label>
                </div>
                <div class="cart-good-name">桃子</div>
                <div class="cart-good-number">
                    <div class="gw_num">
                        <em class="jian">-</em>
                        <input type="text" value="5" class="num"/>
                        <em class="add">+</em>
                     </div>
                     <div style="display: inline-block;vertical-align: top;">
                        <span style="display: inline-block; font-size: 12px;">库存（6000）</span>
                     </div>
                    
                </div>
                <div class="cart-good-cost">15</div>
                <div class="cart-good-delete"></div>
            </div>

            <div class="cart-good">
                <!-- 复选框，货品名字，数量，总价-->
                <div class="cart-good-choose">
                    <input type="checkbox" id="checkbox-3" >
                    <label for="checkbox-3" class="cart-good-choose-btn">······</label>
                </div>
                <div class="cart-good-name">梨</div>
                <div class="cart-good-number">
                    <div class="gw_num">
                        <em class="jian">-</em>
                        <input type="text" value="5" class="num"/>
                        <em class="add">+</em>
                     </div>
                     <div style="display: inline-block;vertical-align: top;">
                        <span style="display: inline-block; font-size: 12px;">库存（3000）</span>
                     </div>
                    
                </div>
                <div class="cart-good-cost">30</div>
                <div class="cart-good-delete"></div>
            </div>

            <div class="cart-settle-box">
                <p id="total" >总价：70</p>
                <input type="button" class="cart-settle-btn" value="结算">
            </div>
        </div>
    </div>

    <div id="orders-frame" style="padding-top: 20px;">
        <div class="orders-box">
            <div class="orders-infor">
                <p class="orders-infor-item-1">货品</p>
                <p class="orders-infor-item-2">数量</p class="infor-item">
                <p class="orders-infor-item-3">单价(元)</p class="infor-item">
            </div>
            <div class="order-good">
                <!-- 复选框，货品名字，数量，总价-->
                <div class="order-good-choose">
                    <img src="./images/圣诞鹿.png">
                </div>
                <div class="order-good-name">苹果</div>
                <div class="order-good-number">
                    <span>6</span></div>
                <div class="order-good-cost">25</div>
            </div>
    
            <div class="order-good">
                <!-- 复选框，货品名字，数量，总价-->
                <div class="order-good-choose">
                    <img src="./images/圣诞鹿.png">
                </div>
                <div class="order-good-name">桃子</div>
                <div class="order-good-number">
                    <span>5</span>
                </div>
                <div class="order-good-cost">15</div>
            </div>

            <div class="order-good">
                <!-- 复选框，货品名字，数量，总价-->
                <div class="order-good-choose">
                    <img src="./images/圣诞鹿.png">
                </div>
                <div class="order-good-name">梨</div>
                <div class="order-good-number">
                    <span>5</span>
                </div>
                <div class="order-good-cost">30</div>
            </div>

            <div class="order-settle-box">
                <p class="total" >总价：70</p>
                <p class="time" >下单时间：2019.12.16 11:30</p>
            </div>
        </div>
    </div>

    <div id="bottom">
        <img src="./images/圣诞树.png" class="bottom-img">
    </div>


    <div id="middle-index" style="position: absolute; width: 100%; height: 100%; background:#000; opacity:.8; filter:alpha(opacity=80); top: 0; right: 0;z-index: 1;"></div>
    
    <!-- 加入购物车界面 -->
    <div id="add-outside">
        <div class="add-box">
            <div class="add-infor">
                <img src="./images/add.png" class="add-infor-img">
                <span class="add-infor-span">商品名称</span>
            </div>
            <div class="add-num">
                <span style="font-size: 14px;">请选择货品数量：</span>
                <div style="margin-top: 5px;padding-bottom:40px;border-bottom: lightgray solid 1px;">
                    <div class="add-gw_num">
                        <em class="add-minus">-</em>
                        <input type="text" value="5" class="number"/>
                        <em class="add-add">+</em>
                     </div>
                     <div style="display: inline-block;vertical-align: top;">
                        <span style="display: inline-block; font-size: 12px;">库存（5000）</span>
                     </div>
                </div>                
            </div>
            <div class="add-confirm">
                <div id="add-yes" onclick="addGoodYes()">确定</div>
                <div id="add-no" onclick="addGoodNo()">取消</div>
            </div>
        </div>
    </div>


</body>
<script type="text/javascript" src="./scripts/jquery.js"></script>
<script type="text/javascript">
    var selectNav = document.querySelectorAll('.nav .nav-select');
    for (let i = 0; i < selectNav.length; i++) {
        selectNav[i].onclick = function () {
            if (i == 0) {
                showGoodFrame();
            } else if (i == 1) {
                showCartFrame();
            } else {
                showOrderFrame();
            }
            for (j = 0; j < selectNav.length; j++) {
                selectNav[j].className = "nav-select";
            }
            this.className += " selected";
        }
    }

    window.onload=function(){
        $("#login").show();
        $("#top").hide();
        $("#shopping-cart-frame").hide();
        $("#orders-frame").hide();
        $("#goods-frame").hide();
        $("#middle-index").hide();
        $("#add-outside").hide();
    }

    function login() {
        // var userValue=document.loginForm.user.value;
        // var pwdValue=document.loginForm.password.value;
        // console.log(userValue);
        // console.log(pwdValue);
        // $.ajax({
        //     type:'POST',
        //     url:'servlet/login',
        //     data:
        //     {
        //         "user":userValue,
        //         "password":pwdValue
        //     },
        //     success:function(data,status){
        //     	console.log(data.flag);
        //     	if(data.flag){
        //     		console.log("登录");
                    $("#login").hide();
                    $("#top").show();
                    $("#shopping-cart-frame").hide();
                    $("#orders-frame").hide();
                    $("#goods-frame").show();
    //              sessionStorage.setItem('user',user);
    //         	}
    //         	else{
    //         		alert("登录失败");
    //         	}
    //         },
    //         error:function(data,status){
    //         	alert("登录失败，用户名或密码错误，请再试一试~");
    //         }
    //     })
     }


    function showGoodFrame(){
        // $.ajax({
        //     type:'POST',
        //     url:'servlet/goodFrame',
        //     data:
        //     {
        //         "user":user,
        //     },
        //     success:function(data,status){
        //     	console.log(data.flag);
        //     	if(data.flag){
        //             //把商品列表一个个添加
        //             for(i=0;i<data.goods.length;i++)
        //             {
        //                 goodlist(goodId,goodName,goodBrand,goodPrice,goodStock);
        //                 // data.goods[i] .id  .pname .brand .price .stock
        //                 var goodFrame=document.createElement('div');
        //                 goodFrame.className="goods";
        //                 var goodBox=document.createElement('div');
        //                 goodBox.className="good-box";
        //                 var goodImg=document.createElement('img');
        //                 goodImg.className="good-img";

        //                 var inforBox=document.createElement('div');
        //                 inforBox.className="infor-box";
        //                 var goodName=document.createElement('span');
        //                 goodName.className="good-name";
        //                 var good=document.createElement('span');
        //                 goodName.className="good-name";

                        

        //             }
                    $("#shopping-cart-frame").hide();
                    $("#orders-frame").hide();
                    $("#goods-frame").show();
    //         	}
    //         	else{
    //         		alert("登录失败");
    //         	}
    //         },
    //         error:function(data,status){
    //         	alert("登录失败，用户名或密码错误，请再试一试~");
    //         }
    //     })
     }


    function showCartFrame(){
        $("#goods-frame").hide();
        $("#orders-frame").hide();

        $("#shopping-cart-frame").show();
    }

    function showOrderFrame(){
        $("#goods-frame").hide();
        $("#shopping-cart-frame").hide();

        $("#orders-frame").show();
    }

    $(document).ready(function(){
     //加的效果
     $(".add").click(function(){
       var n=$(this).prev().val();
       var num=parseInt(n)+1;
       if(num==0){ return;}
          $(this).prev().val(num);
     });
     //减的效果
     $(".jian").click(function(){
       var n=$(this).next().val();
       var num=parseInt(n)-1;
       if(num==0){ return}
       $(this).next().val(num);});
    });
</script>

<script>

    
    $(document).ready(function(){
     //加的效果
     $(".add-add").click(function(){
       var n=$(this).prev().val();
       var num=parseInt(n)+1;
       if(num==0){ return;}
          $(this).prev().val(num);
     });
     //减的效果
     $(".add-minus").click(function(){
       var n=$(this).next().val();
       var num=parseInt(n)-1;
       if(num==0){ return}
       $(this).next().val(num);});
    });

    var body=document.body;

    function addGood(good){
        $("#add-outside")
        body.style.overflow="hidden";
        $("#middle-index").show();
        $("#add-outside").show();
    }

    function addGoodYes(){
        body.style.overflow="auto";
        $("#middle-index").hide();
        $("#add-outside").hide();
    }

    function addGoodNo(){
        body.style.overflow="auto";
        $("#middle-index").hide();
        $("#add-outside").hide();
    }
</script>


</html>